import { Fragment, useCallback } from 'react'
import { Button, Col, Form, Input, Row, Select } from 'antd';

export default function GradesSearch({
  setAddOpen,
  onFinish,
  setOpenUpload,
  Reset,
  role,
  studentColList,
  teacherColList
}) {
  const [form] = Form.useForm();
 
  const handleReset = useCallback(() => {
    form.resetFields();
  }, [form]);

  return (
    <Fragment>
      <Form
        form={form}
        name="gradeSearch"
        onFinish={onFinish}
        size="small"
      >
        <Row gutter={32} >
          {
            role.fd_type === "student" ? <SearchStudentCol studentColList={studentColList} /> :
            role.fd_type === "teacher" ? <SearchTeacherCol teacherColList={teacherColList} /> : ''
          }
          <Col className="trainingPlan-sea-but" span={3} offset={1}>
            <Form.Item>
              <Button htmlType='submit'>检索</Button>
              <Button onClick={() => {
                handleReset();
                Reset()
              }}>重置</Button>
            </Form.Item>
          </Col>
          {
            role?.fd_type === "teacher" ?
              <Col className="trainingPlan-sea-but" span={4} offset={0}>
                <Form.Item>
                  <Button onClick={() => { setAddOpen(true) }}>添加成绩</Button>
                  <Button onClick={() => { setOpenUpload(true) }}>上传文件</Button>
                </Form.Item>
              </Col> :
              <></>
          }
        </Row>
      </Form>
    </Fragment>
  )
}

const SearchStudentCol = ({ studentColList }) => {
  return (
    <>
      {
        studentColList?.map((item) => {
          return (
            <Col key={item.name} span={item.span} offset={item.offset}>
              <Form.Item
                name={item.name}
                label={item.label}
                rules={[item.rules]}
              >
                {
                  item.name === 'fd_semester' ?
                    <Select
                    showSearch
                    filterOption={(input, option) =>
                      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                    }
                      listHeight={90}
                      style={{ width: 150 }}
                      key="value"
                      options={item.semesterOptions}
                    /> :
                    item.name === "fd_type" ?
                      <Select
                        listHeight={90}
                        style={{ width: 130 }}
                        key="value"
                        options={
                          [
                            { value: '', label: '类型', },
                            { value: '1', label: '必修', },
                            { value: '2', label: '选修', },
                          ]
                        }
                      /> :
                      <Input />
                }
              </Form.Item>
            </Col>
          )
        })
      }
    </>
  )
}

const SearchTeacherCol = ({ teacherColList }) => {
  return (
    <>
      {
        teacherColList?.map((item) => {
          return (
            <Col key={item.name} span={item.span} offset={item.offset}>
              <Form.Item
                name={item.name}
                label={item.label}
                rules={[item.rules]}
              >
                {
                  item.name === 'fd_claNum' ?
                    <Select
                      listHeight={90}
                      style={{ width: 150 }}
                      key="value"
                      options={item.classes}
                      showSearch
                      filterOption={(input, option) => (option?.label ?? '').includes(input)}
                      filterSort={(optionA, optionB) =>
                        (optionA?.label ?? '').toLowerCase().localeCompare((optionB?.label ?? '').toLowerCase())
                      }
                    /> :
                    item.name === "fd_curriculumNum" ?
                      <Select
                        listHeight={90}
                        style={{ width: 150 }}
                        key="value"
                        options={item.curriculum}
                        showSearch
                        filterOption={(input, option) => (option?.label ?? '').includes(input)}
                        filterSort={(optionA, optionB) =>
                          (optionA?.label ?? '').toLowerCase().localeCompare((optionB?.label ?? '').toLowerCase())
                        }
                      /> :
                      <Input />
                }
              </Form.Item>
            </Col>
          )
        })
      }
    </>
  )
}